<template>
  <div class="beautyBall">
    <img src="./pp.png" alt="">
    <canvas ref="c"></canvas>
  </div>
</template>

<script>
const Color = require('color-js');
export default {
  name: "StyleBar",
  props: {
    range: {
      type: Number | String,
      required: true
    },
    color: {
      type: String,
      required: false
    }
  },
  data () {
    return {};
  },
  mounted: function () {
    var vm = this;
    vm.nRange = parseFloat(vm.range).toFixed(2);
    var canvas = vm.$refs.c;
    var ctx = canvas.getContext("2d");
    var nowRange = 40;

    // 定义画布属性
    var mW = (canvas.width = 180);
    var mH = (canvas.height = 180);
    var lineWidth = 1;

    // 定义圆
    var r = mH / 2; // 圆心
    var cR = r - 32 * lineWidth; // 圆半径

    // 定义曲线属性
    var sX = 0;
    var axisLength = mW; // 轴长
    var waveWidth = 0.02; // 波浪宽度,数越小越宽
    var waveHeight = 10; // 波浪高度,数越大越高
    var speed = 0.09; // 波浪速度，数越大速度越快
    var xOffset = 1; // 波浪x偏移量

    ctx.lineWidth = lineWidth;

    // 画圈函数
    var IsdrawCircled = false;
    var drawCircle = function () {
      ctx.beginPath();
      ctx.strokeStyle = "#1090d000"; // 定义圆框颜色
      ctx.arc(r, r, cR + 20, 0, 2 * Math.PI); // 定义圆边框
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(r, r, cR + 10, 0, 2 * Math.PI); // 添加内圈的圆,配合波浪
      ctx.clip();
      IsdrawCircled = true;
    };

    // 画sin 曲线函数
    var drawSin = function (xOffset, color, waveHeight) {
      ctx.save();
      var points = [];
      ctx.beginPath();
      // 在整个轴上取点
      for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {
        var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;
        var dY = mH * (1 - nowRange / 100);
        points.push([x, dY + y * waveHeight + (nowRange - 25) * 0.2]);
        ctx.lineTo(x, dY + y * waveHeight + (nowRange - 25) * 0.2);
      }

      // 封闭路径
      ctx.lineTo(axisLength, mH);
      ctx.lineTo(sX, mH);
      ctx.lineTo(points[0][0], points[0][1]);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.restore();
      ctx.restore();
    };

    var render = function () {
      var tmp = 1;
      ctx.clearRect(0, 0, mW, mH);

      if (IsdrawCircled == false) {
        drawCircle();
      }

      if (nowRange <= vm.nRange) {
        nowRange += tmp;
      }

      if (nowRange > vm.nRange) {
        nowRange -= tmp;
      }
      var colorObj = Color(vm.color || '#1c86d1');
      colorObj.setAlpha(0.5);
      // `rgba(${colorObj.red * 255}, ${colorObj.green * 255}, ${colorObj.blue * 255}, 0.5)`
      drawSin(xOffset + Math.PI * 0.7, colorObj.toCSS(), waveHeight);
      colorObj.setAlpha(0.8);
      drawSin(xOffset, colorObj.toCSS(), waveHeight);
      drawText();
      xOffset += speed;
      requestAnimationFrame(render);
    };

    // 写百分比文本函数
    var drawText = function () {
      ctx.save();
      var size = 0.6 * cR;
      ctx.font = size + "px Microsoft Yahei";
      ctx.textAlign = "center";
      ctx.fillStyle = "rgba(255,255,255,1)";
      ctx.fillText(~~nowRange + "%", r, r + size / 2);
      ctx.restore();
    };
    render();
  },
  watch: {
    range: function (n) {
      this.nRange = parseFloat(this.range).toFixed(2);
    }
  }
};
</script>

<style lang="scss" scoped>
.beautyBall {
  height: 180px;
  width: 180px;
  position: relative;
  pointer-events: none;
  img {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 140px;
  }
}
</style>
